﻿@page "/tooltip/html-template"
@using Syncfusion.Blazor.Buttons;
@using Syncfusion.Blazor.Popups
@inherits SampleBaseComponent;
@using Syncfusion

<SampleDescription>
    <p>This sample demonstrates customizing Tooltip content to display a HTML page.</p>
</SampleDescription>
<ActionDescription>
   <p>Tooltip content has been customized using HTML tags and CSS, i.e. the content can be loaded with HTML tags such as &lt;img&gt;, &lt;a&gt;,&lt;b&gt;, etc. Title can also be added to the content. Overall, the Tooltip content can be customized to appear like a web page.</p>
</ActionDescription>

<div id="htmlTemplate" class="col-lg-12 control-section">
    <div id="customization">
        <SfTooltip CssClass="e-tooltip-css" OpensOn="Click">
            <TooltipTemplates>
                <Content>
                    <div id='democontent' class='democontent'>
                        <div class='info'>
                            <h3 style='margin-top:10px'>Eastern Bluebird </h3><hr style='margin-top:10px'>
                            <div style='margin-top: -10px'>
                                <div style='float:left;width:57%'>
                                    The<a href='https://en.wikipedia.org/wiki/Eastern_bluebird' target='blank'> Eastern Bluebird</a>
                                    is easily found in open fields and sparse woodland areas, including along woodland edges.These are<i>cavity-nesting birds</i>and a pair of eastern bluebirds will raise 2-3 broods annually, with 2-8 light blue or whitish eggs per brood.
                                </div>
                                <div id='bird' style='float:right;width:42%'><img src='images/tooltip/bird.png' width='125' height='125' /></div>
                            </div>
                            <div style='margin-top:160px'>
                                <hr><p style='margin-top:-11px'> Eastern bluebirds can be very vocal in flocks.Their calls include a rapid, mid-tone chatter and several long dropping pitch calls.</p>
                            </div><p>Source:<br><a href='https://en.wikipedia.org/wiki/Eastern_bluebird' target='_blank'>https://en.wikipedia.org/wiki/Eastern_bluebird</a></p>
                        </div>
                    </div>
                </Content>
            </TooltipTemplates>
            <SfButton CssClass="e-outline text" IsPrimary="true" Content="HTML Template"></SfButton>
        </SfTooltip>
    </div>
</div>

<style>
    #htmlTemplate {
        height: 385px;
    }
    #customization {
        display: table;
        margin: 0 auto;
    }
    .e-tooltip-css {
        filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.25));
    }
    .text {
        text-transform: capitalize;
        width: 155px;
    }
    .democontent {
        border: 0.5px solid grey;
    }
    #bird {
        padding-top: 4px;
    }
    .info a {
        color: #2FA1E3;
    }
    .info {
        padding-left: 12px;
        padding-right: 5px;
    }
</style>
